<template>
	<div>
		<el-row v-if="!detailShow">
			<el-col :span="24">
				<div style="height: 0.5em;"></div>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">选择月份:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" v-model="time" format="yyyy-MM" :editable=false type="month" placeholder="选择月份">
				</el-date-picker>
			</el-col>
			

			<el-col :span="10" :offset="1" style="padding-left: 0px;">
				<el-button type="primary" size="small" v-on:click='baseQuery'>查询</el-button>
				<el-button type="primary" size="small" v-on:click="processOut" v-if="table">导出</el-button>
				<el-button type="primary" size="small" v-on:click='lookReport'>报表说明</el-button>
				<el-button class="el-icon-menu" type="primary" size="small" v-on:click='change'></el-button>
			</el-col>

		</el-row>
		<div>
			<div v-if="table&&!detailShow" style="display:block">
				<div class="report_Fixedwidth">
					<table cellspacing="0" id="maintenanceReturn" cellpadding="0" width="1400px" class="report_table">
						<tbody>
							<tr class="texttbody">
								<th scope="col" rowspan="2" colspan="4">公司</th>
								<th scope="col" rowspan="2" colspan="2" style="width: 80px">客户经理</th>
								<th scope="col" colspan="6">首保</th>
								<th scope="col" colspan="6">二保</th>
								<th scope="col" colspan="6">定保</th>
								<th scope="col" colspan="2" rowspan="2">任务总计</th>
								<th scope="col" colspan="2" rowspan="2" style="width:100px;">保养车辆总数</th>
							</tr>
							<tr class="texttbody">
								<td style="width: 50px">首保</td>
								<td style="width: 50px">首保回厂</td>
								<td style="width: 50px">回厂率</td>
								<td style="width: 50px">目标月</td>
								<td style="width: 50px">目标月回厂</td>
								<td style="width: 50px">回厂率</td>
								<td style="width: 50px">二保</td>
								<td style="width: 50px">二保回厂</td>
								<td style="width: 50px">回厂率</td>
								<td style="width: 50px">目标月</td>
								<td style="width: 50px">目标月回厂</td>
								<td style="width: 50px">回厂率</td>
								<td style="width: 50px">定保</td>
								<td style="width: 50px">定保回厂</td>
								<td style="width: 50px">回厂率</td>
								<td style="width: 50px">目标月</td>
								<td style="width: 50px">目标月回厂</td>
								<td style="width: 50px">回厂率</td>
								<tr v-for="item in tableData.dataList">
									<td colspan="4">{{item.oName}}</td>
									<td colspan="2">{{item.uName}}</td>
									<td>
										<div v-if="item.sb != '0'">
											<el-button type="text" @click="lookdetail(item,'0','sb_mbr')">{{item.sb}}</el-button>
										</div>
										<div v-if="item.sb == '0'">
											{{item.sb}}
										</div>
									</td>
									<td>
										<div v-if="item.sbBack != '0'">
											<el-button type="text" @click="lookdetail(item,'1','sb_mbr')">{{item.sbBack}}</el-button>
										</div>
										<div v-if="item.sbBack == '0'">
											{{item.sbBack}}
										</div>
									</td>
									<td>{{item.sb=='0'||item.sbBack=='0'?"0.00%":parseFloat(item.sbBack*100/item.sb).toFixed(2)+"%"}}</td>
									<td>
										<div v-if="item.sby != '0'">
											<el-button type="text" @click="lookdetail(item,'0','sb_mby')">{{item.sby}}</el-button>
										</div>
										<div v-if="item.sby == '0'">
											{{item.sby}}
										</div>
									</td>
									<td>
										<div v-if="item.sbyBack != '0'">
											<el-button type="text" @click="lookdetail(item,'1','sb_mby')">{{item.sbyBack}}</el-button>
										</div>
										<div v-if="item.sbyBack == '0'">
											{{item.sbyBack}}
										</div>
									</td>
									<td>{{item.sby=='0'||item.sbyBack=='0'?"0.00%":parseFloat(item.sbyBack*100/item.sby).toFixed(2)+"%"}}</td>
									<td>
										<div v-if="item.eb != '0'">
											<el-button type="text" @click="lookdetail(item,'0','eb_mbr')">{{item.eb}}</el-button>
										</div>
										<div v-if="item.eb == '0'">
											{{item.eb}}
										</div>
									</td>
									<td>
										<div v-if="item.ebBack != '0'">
											<el-button type="text" @click="lookdetail(item,'1','eb_mbr')">{{item.ebBack}}</el-button>
										</div>
										<div v-if="item.ebBack == '0'">
											{{item.ebBack}}
										</div>
									</td>
									<td>{{item.eb=='0'||item.ebBack=='0'?"0.00%":parseFloat(item.ebBack*100/item.eb).toFixed(2)+"%"}}</td>
									<td>
										<div v-if="item.eby != '0'">
											<el-button type="text" @click="lookdetail(item,'0','eb_mby')">{{item.eby}}</el-button>
										</div>
										<div v-if="item.eby == '0'">
											{{item.eby}}
										</div>
									</td>
									<td>
										<div v-if="item.ebyBack != '0'">
											<el-button type="text" @click="lookdetail(item,'1','eb_mby')">{{item.ebyBack}}</el-button>
										</div>
										<div v-if="item.ebyBack == '0'">
											{{item.ebyBack}}
										</div>
									</td>
									<td>{{item.eby=='0'||item.ebyBack=='0'?"0.00%":parseFloat(item.ebyBack*100/item.eby).toFixed(2)+"%"}}</td>
									<td>
										<div v-if="item.db != '0'">
											<el-button type="text" @click="lookdetail(item,'0','db_mbr')">{{item.db}}</el-button>
										</div>
										<div v-if="item.db == '0'">
											{{item.db}}
										</div>
									</td>
									<td>
										<div v-if="item.dbBack != '0'">
											<el-button type="text" @click="lookdetail(item,'1','db_mbr')">{{item.dbBack}}</el-button>
										</div>
										<div v-if="item.dbBack == '0'">
											{{item.dbBack}}
										</div>
									</td>
									<td>{{item.db=='0'||item.dbBack=='0'?"0.00%":parseFloat(item.dbBack*100/item.db).toFixed(2)+"%"}}</td>
									<td>
										<div v-if="item.dby != '0'">
											<el-button type="text" @click="lookdetail(item,'0','db_mby')">{{item.dby}}</el-button>
										</div>
										<div v-if="item.dby == '0'">
											{{item.dby}}
										</div>
									</td>
									<td>
										<div v-if="item.dbyBack != '0'">
											<el-button type="text" @click="lookdetail(item,'1','db_mby')">{{item.dbyBack}}</el-button>
										</div>
										<div v-if="item.dbyBack == '0'">
											{{item.dbyBack}}
										</div>
									</td>
									<td>{{item.dby=='0'||item.dbyBack=='0'?"0.00%":parseFloat(item.dbyBack*100/item.dby).toFixed(2)+"%"}}</td>
									<td colspan="2">
										<div v-if="item.taskNum != '0'">
											<el-button type="text" @click="lookdetail(item,'0','')">{{item.taskNum}}</el-button>
										</div>
										<div v-if="item.taskNum == '0'">
											{{item.taskNum}}
										</div>
									</td>
									<td>
										<div v-if="item.byNum != '0'">
											<el-button type="text" @click="lookdetail(item,'1','')">{{item.byNum}}</el-button>
										</div>
										<div v-if="item.byNum == '0'">
											{{item.byNum}}
										</div>
									</td>
								</tr>

						</tbody>
					</table>
				</div>
			</div>
			<el-row :gutter="24" v-if="detailShow">
				<el-col :span="24" style="text-align: right;">
					<el-button type="primary" size="small" @click="back">返回</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="24" v-if="detailShow">
				<el-table :data="detailData.dataList" border style="width: 100%;align-content: center;">
					<el-table-column label="车主姓名" prop="ownerName" width="100">
					</el-table-column>
					<el-table-column label="车主手机" prop="ownerPhone" width="150">
					</el-table-column>
					<el-table-column label="车主电话" prop="ownerTel" width="150">
					</el-table-column>
					<el-table-column label="品牌" prop="brand" width="100">
					</el-table-column>
					<el-table-column label="车系" prop="series" width="150">
					</el-table-column>
					<el-table-column label="车型" prop="model" width="100">
					</el-table-column>
					<el-table-column label="车主车辆配置" prop="configure" width="200">
					</el-table-column>
					<el-table-column label="是否返厂" prop="isBack" :formatter="isBackCov" width="100">
					</el-table-column>
					<el-table-column label="提醒时间" prop="expectDate" width="140">
					</el-table-column>
					<el-table-column label="完成时间" prop="dealDate" width="140">
					</el-table-column>
					<el-table-column label="状态" prop="status" :formatter="statusCov" width="80">
					</el-table-column>
					<el-table-column label="内容" prop="content" width="300">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="detailData.total">
				</el-pagination>
			</el-row>
			<div v-if="!table" style="display:block;">
				<div class="report_Fixedwidth">
					<div class="report_card" v-for="item in tableData.dataList">
						<div class="report_kapian">
							{{item.uName}}
							<br> 客户经理
						</div>
						<div class="report_text">
							首保/首保回厂：{{item.sb}}/{{item.sbBack}}
							<br> 首保目标月/首保目标月回厂：{{item.sby}}/{{item.sbyBack}}
							<br> 二保/二保回厂：{{item.eb}}/{{item.ebBack}}
							<br> 二保目标月/二保目标月回厂：{{item.eby}}/{{item.ebyBack}}
							<br> 定保/定保回厂：{{item.db}}/{{item.dbBack}}
							<br> 定保目标月/定保目标月回厂：{{item.dby}}/{{item.dbyBack}}
							<br> 任务总计：{{item.taskNum}}
							<br> 保养车辆总数：{{item.byNum}}
							<br>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="报表说明" v-model="reportShow" size="tiny">
			<div style="overflow-y: scroll;height: 400px;">
				<b style="font-size: 15px;">保养回厂率：</b>&nbsp;&nbsp;<b style="font-size: 12px;">用于统计保养任务生成之后车辆回厂情况，车辆在任务提醒日期所在月与次月内来店保养算回厂</b><br><br>
				<b style="font-size: 15px;">客户经理：</b>&nbsp;&nbsp;<b style="font-size: 12px;">任务处理人员，未分配代表未下发的任务</b><br><br>
				<b style="font-size: 15px;">首保-首保：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下当月任务小类为首保目标日的任务数</b><br><br>
				<b style="font-size: 15px;">首保-首保回厂：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下当月任务小类为首保目标日的任务对应的车辆在任务提醒日期所在月与次月中来店进行保养的车辆数</b><br><br>
				<b style="font-size: 15px;">首保-回厂率（目标日）：</b>&nbsp;&nbsp;<b style="font-size: 12px;">首保-首保回厂/首保-首保，保留两位小数</b><br><br>
				<b style="font-size: 15px;">首保-目标月：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下当月任务小类为首保目标月的任务数</b><br><br>
				<b style="font-size: 15px;">首保-目标月回厂：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下当月任务小类为首保目标月的任务对应的车辆在任务提醒日期所在月与次月中来店进行保养的车辆数</b><br><br>
				<b style="font-size: 15px;">首保-回厂率（目标月）：</b>&nbsp;&nbsp;<b style="font-size: 12px;">首保-目标月回厂/首保-目标月，保留两位小数。二保、定保与首保计算方式相同</b><br><br>
				<b style="font-size: 15px;">任务总计：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下当月的 首保+首保目标月+二保+二保目标月+定保+定保目标月任务数之和</b><br><br>
				<b style="font-size: 15px;">保养车辆：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下当月的对应的任务的回厂总数</b><br><br>
			</div>
		</el-dialog>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>
	</div>
</template>
<script>
	import exports from '../../plugins/exportModule.vue'
	import moment from 'moment'
	import echarts from 'echarts'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: window.localStorage.getItem("companyId"),
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				//baobiao shuoming
				reportShow: false,
				//表格显示
				table: true,
				msg: "123",
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//分组数据
				tableData: {
					total: 0,
					dataList: []
				},
				time: '',
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//表格名字
				excelName: '保养回厂率.xls',
				CurentPages: 1,
				//Mingxi
				detailShow: false,
				detailQueryData: {
					saId: '',
					typeCode: '',
					mDate: '',
					isBack: '',
				},
				detailData: {
					total: 0,
					dataList: []
				},
			}
		},
		methods: {
			handleSizeChanges: function() {

			},
			//baoxiandan fenye
			handleCurrentChanges: function(currentPage) {
				this.$data.CurentPages = currentPage;
				this.detatilQuery();
			},
			//fenyechaxun 
			detatilQuery: function() {
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/kpi/byBackRate/detail', //url
					params: { //发送的参数
						companyId: this.$data.detailQueryData.companyId,
						saId: this.$data.detailQueryData.saId,
						mDate: this.$data.detailQueryData.mDate,
						isBack: this.$data.detailQueryData.isBack,
						typeCode: this.$data.detailQueryData.typeCode,
						limit: this.page.pageSize,
						start: this.$data.CurentPages
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					this.$data.detailData = resp.data;
				}, function(error) {
					// error
				})
			},
			//返回
			back: function() {
				this.$data.detailShow = false;
				this.$data.CurentPages = 1;
				this.$data.detailData.dataList = [];
				this.$data.detailData.total = 0;
			},
			//查看明细
			lookdetail: function(item, num, type) {

				this.$data.detailShow = true;
				if(item.uName == "未分配") {
					this.$data.detailQueryData.saId = "未分配";
				} else {
					this.$data.detailQueryData.saId = item.saId;
				}
				if(this.$data.time == '') {
					var tiems = new Date();
					tiems = this.moment(tiems).format("YYYY-MM")
				} else {
					var tiems = this.moment(this.$data.time).format("YYYY-MM")
				}
				this.$data.detailQueryData.mDate = tiems;
				this.$data.detailQueryData.typeCode = type;
				this.$data.detailQueryData.companyId = item.companyId;
				if(num == '0') {
					this.$data.detailQueryData.isBack = "";
				} else {
					this.$data.detailQueryData.isBack = num;
				}

				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/kpi/byBackRate/detail', //url
					params: { //发送的参数
						companyId: this.$data.detailQueryData.companyId,
						saId: this.$data.detailQueryData.saId,
						mDate: this.$data.detailQueryData.mDate,
						isBack: this.$data.detailQueryData.isBack,
						typeCode: this.$data.detailQueryData.typeCode,
						limit: this.page.pageSize,
						start: this.$data.CurentPages
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					this.$data.detailData = resp.data;
				}, function(error) {
					// error
				})

			},
			//daochu 
			processOut: function() {
				this.$data.tableId = "maintenanceReturn";
				this.$data.template = "<template><div><div><div><div><table border='1'>{table}</table></div></div></div></div></template>";
			},
			//daochu fanhuihanshu
			backFunction: function() {
				this.$data.tableId = "";
			},
			//查看报表说明
			lookReport: function() {
				this.$data.reportShow = true;
			},
			//表格转换
			change: function() {
				if(this.$data.table == true) {
					this.$data.table = false;
				} else {
					this.$data.table = true;
				}
			},
			statusCov: function(row, column) {
				if(row.status == 0) {
					return '未完成';
				} else if(row.status == 1) {
					return '完成';
				} else if(row.status == 2) {
					return '关闭';
				}
			},
			isBackCov: function(row, column) {
				if(row.isBack == 0) {
					return '否';
				}
				if(row.isBack == 1) {
					return '是'
				}
			},
			//首保回厂率
			sbBackRate: function(row, column) {
				return this.rateMath(row.sbBack, row.sb);
			},
			//首保月回厂率
			sbyBackRate: function(row, column) {
				return this.rateMath(row.sbyBack, row.sby);
			},
			//二保回厂率
			ebBackRate: function(row, column) {
				return this.rateMath(row.ebBack, row.eb);
			},
			//二保月回厂率
			ebyBackRate: function(row, column) {
				return this.rateMath(row.ebyBack, row.eby);
			},
			//定保回厂率
			dbBackRate: function(row, column) {
				return this.rateMath(row.dbBack, row.db);
			},
			//定保月回厂率
			dbyBackRate: function(row, column) {
				return this.rateMath(row.dbyBack, row.dby);
			},
			rateMath: function(num, nums) {
				if(nums == 0 || num == '0') {
					return '0';
				} else {
					return(num / nums * 100).toFixed(2) + "%";
				}
			},

			//查询
			baseQuery: function() {
				debugger;
				if(this.$data.time == '') {
					var tiems = '';
				} else {
					var tiems = this.moment(this.$data.time).format("YYYY-MM")
				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司");
				} else {
					this.$http.post(this.API_ROOT + '/crm/kpi/byBackRate', this.$data.condition, {
							params: {
								mDate: tiems,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
								start: this.$data.CurentPage,
								limit: 50
							}
						})
						.then(resp => {
							debugger;
							if(resp.data.success) {
								resp.data.total = parseInt(resp.data.total);
								// es5写法
								this.$data.tableData = resp.data;
								//this.baseQuery(this.$data.curTreeDeptId);
								//this.$data.exFormShow = false;
								//合计
								var sbNum = 0; //首保
								var sbBackNum = 0; //首保回厂
								var sbyNum = 0; //首保月
								var sbyBackNum = 0; //首保月回厂
								var ebNum = 0; //二保
								var ebBackNum = 0; //二保回厂
								var ebyNum = 0; //二保月
								var ebyBackNum = 0; //二保月回厂
								var dbNum = 0; //定保
								var dbBackNum = 0; //定保回厂
								var dbyNum = 0; //定保月
								var dbyBackNum = 0; //定保月回厂
								var allNum = 0; //总数
								var allBackNum = 0; //总回厂							
								if(this.$data.tableData.dataList.length > 0) {
									for(var i = 0; i < this.$data.tableData.dataList.length; i++) {
										sbNum += Number(this.$data.tableData.dataList[i].sb);
										sbBackNum += Number(this.$data.tableData.dataList[i].sbBack); //首保回厂
										sbyNum += Number(this.$data.tableData.dataList[i].sby); //首保月
										sbyBackNum += Number(this.$data.tableData.dataList[i].sbyBack); //首保月回厂
										ebNum += Number(this.$data.tableData.dataList[i].eb); //二保
										ebBackNum += Number(this.$data.tableData.dataList[i].ebBack); //二保回厂
										ebyNum += Number(this.$data.tableData.dataList[i].eby); //二保月
										ebyBackNum += Number(this.$data.tableData.dataList[i].ebyBack);; //二保月回厂
										dbNum += Number(this.$data.tableData.dataList[i].db); //定保
										dbBackNum += Number(this.$data.tableData.dataList[i].dbBack); //定保回厂
										dbyNum += Number(this.$data.tableData.dataList[i].dby); //定保月
										dbyBackNum += Number(this.$data.tableData.dataList[i].dbyBack); //定保月回厂
										allNum += Number(this.$data.tableData.dataList[i].taskNum); //总数
										allBackNum += Number(this.$data.tableData.dataList[i].byNum); //总回厂
									}
									debugger;
									//将合计值赋给dataList最后一行
									var length = this.$data.tableData.dataList.length;
									var addArray = {
										uName: '',
										sb: '',
										sbBack: '',
										sby: '',
										sbyBack: '',
										eb: '',
										ebBack: '',
										eby: '',
										ebyBack: '',
										db: '',
										dbBack: '',
										dby: '',
										dbyBack: '',
										taskNum: '',
										byNum: '',
										oName: '',
										companyId: '',
									};
									this.$data.tableData.dataList = this.$data.tableData.dataList.concat(addArray);
									this.$data.tableData.dataList[length].uName = '合计';
									this.$data.tableData.dataList[length].sb = sbNum;
									this.$data.tableData.dataList[length].sbBack = sbBackNum;
									this.$data.tableData.dataList[length].sby = sbyNum;
									this.$data.tableData.dataList[length].sbyBack = sbyBackNum;
									this.$data.tableData.dataList[length].eb = ebNum;
									this.$data.tableData.dataList[length].ebBack = ebBackNum;
									this.$data.tableData.dataList[length].eby = ebyNum;
									this.$data.tableData.dataList[length].ebyBack = ebyBackNum;
									this.$data.tableData.dataList[length].db = dbNum;
									this.$data.tableData.dataList[length].dbBack = dbBackNum;
									this.$data.tableData.dataList[length].dby = dbyNum;
									this.$data.tableData.dataList[length].dbyBack = dbyBackNum;
									this.$data.tableData.dataList[length].taskNum = allNum;
									this.$data.tableData.dataList[length].byNum = allBackNum;
									this.$data.tableData.dataList[length].oName = this.$data.tableData.dataList[length - 1].oName;
									this.$data.tableData.dataList[length].companyId = this.$data.tableData.dataList[length - 1].companyId;
								}
							} else {
								//debugger;
								this.$message.error(resp.data.msg);
							}
						}, resp => {});
				}
			},

			//时间转换
			buyDates: function(row, column) {
				if(row.recordLength == "" || row.recordLength == null) return "";
				return moment(Number(row.recordLength)).format("YYYY-MM-DD");
			},
			
			
		},
		//表单创建时执行
		created: function() {
		
		},
		components: {
			exports
		}
	}
</script>